<template>
  <el-dialog  title="设备详情"
              width="80%"
              custom-class="editdailog"
              :visible.sync="visible"
              @close="$emit('update:showdetails', false)"
              :show="showdetails">
    <div class="devicedetails_content" v-loading.body="loading">
      <div class="devicedetails_list">
        <el-row :gutter="12">
          <el-col :span="9">
            <el-card shadow="always" class="ca-box">
              <div class="ca-title"><i class="el-icon-star-on"></i>设备概要：(设备编号：{{devicerow.trackerId||''}})</div>
              <div class="displayflex">
                <div class="flex">绑定时间:{{devicerow.bindTimeStr||''}}</div>
                <div class="flex">手机号:{{devicerow.telephone||''}}</div>
              </div>
              <div class="displayflex">
                <div class="flex">车牌号:{{devicerow.number||''}}</div>
                <div class="flex">颜色:{{devicerow.color||''}}</div>
              </div>
              <div class="displayflex">
                <div class="flex">使用人:{{devicerow.userName||''}}</div>
                <div class="flex">品牌:{{devicerow.brand||''}}</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="7">
            <el-card shadow="always" class="ca-box">
              <div class="ca-title"><i class="el-icon-star-on"></i>行驶概要：</div>
              <div class="displayflex">
                <div class="flex">总里程:{{driverow.totalDistance||0}}Km</div>
                <div class="flex">最大速度:{{driverow.maxSpeed||0}}Km/h</div>
              </div>
              <div class="displayflex">
                <div class="flex">均速:{{driverow.avgSpeed||0}}Km/h</div>
                <div class="flex">总时长:{{driverow.totalDuration||0}}分钟</div>
              </div>
              <div class="displayflex">
                <div class="flex">最小速度:{{driverow.minSpeed||0}}Km/h</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="always" class="ca-box">
              <div class="ca-title"><i class="el-icon-star-on"></i>超速概要：</div>
              <div class="displayflex">
                <div class="flex">超速里程:{{overspeedrow.totalDistance||0}}Km</div>
                <div class="flex">最大速度:{{overspeedrow.maxSpeed||0}}Km/h</div>
              </div>
              <div class="displayflex">
                <div class="flex">均速:{{overspeedrow.avgSpeed||0}}Km/h</div>
                <div class="flex">超速时长:{{overspeedrow.totalDuration||0}}分钟</div>
              </div>
              <div class="displayflex">
                <div class="flex">最小速度:{{overspeedrow.minSpeed||0}}Km/h</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div>
        <qrcode :value="devicerow.trackerId || ''" tag="img"></qrcode>
      </div>
      <el-tabs type="border-card"  v-model="tabs" style="width: 100%">
        <el-tab-pane label="行驶记录" name="1">
          <Tables :data="driving.detailList"  :tableTitle="tableTitle0"  :listLoading="loading" ></Tables>
          <Pagations :totalCount="driving.detailsCount" @changePage="changePage" :pageSize="5"></Pagations>
        </el-tab-pane>
        <el-tab-pane label="超速记录" name="2">
          <Tables :data="overspeed.overspeedList"  :tableTitle="tableTitle0"  :listLoading="loading" ></Tables>
          <Pagations :totalCount="overspeed.overspeedCount" @changePage="changePage" :pageSize="5"></Pagations>
        </el-tab-pane>
        <el-tab-pane label="报警记录" name="3">
          <Tables :data="warning.warningList"  :tableTitle="tableTitle1" :operationtype="operationtype1" :listLoading="loading" ></Tables>
          <Pagations :totalCount="warning.warningCount" @changePage="changePage" :pageSize="5"></Pagations>
        </el-tab-pane>
        <el-tab-pane label="变更记录" name="4">
          <Tables :data="ChangeRecord.ChangeRecordList"  :tableTitle="tableTitle3"  :listLoading="loading" ></Tables>
          <Pagations :totalCount="ChangeRecord.ChangeRecordCount" @changePage="changePage" :pageSize="5"></Pagations>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</template>

<script>
  import Pagations from '@/components/pagations'
  import Tables from  '@/components/table'
  import moment from 'moment'
  import qrcode from '@xkeshi/vue-qrcode'
    export default {
        name: "Devicedetails",
        props:{
          showdetails: {
            type: Boolean,
            default: false
          },
          loading: {
            type: Boolean,
            default: false
          },
          devicerow: {
            type: Object,
            default: {}
          },
          driverow: {
            type: Object,
            default: {}
          },
          overspeedrow: {
            type: Object,
            default: {}
          },
          driving: {
            type:Object,
            default:{}
          },
          overspeed: {
            type:Object,
            default:{}
          },
          warning: {
            type:Object,
            default:{}
          },
          ChangeRecord: {
            type:Object,
            default:{}
          }
        },
        components:{
          Pagations,
          Tables,
          qrcode
        },
        watch: {
          showdetails: function() {
            this.visible = this.showdetails
          }
        },
        data() {
          return {
            visible: this.showdetails,
            tabs:'1',
            operationtype1:0,
            tableTitle0:[{
                prop: "date",
                title: "日期",
                render: (h, param) => {
                  if(param.row.date){
                    return moment(param.row.date).format("YYYY-MM-DD HH:mm:ss");
                  }else {
                    return ''
                  }
                }
              },
              {
              title:'经度',
              prop:'lng'
            },{
              title:'纬度',
              prop:'lat'
            }, {
              title:'通信信号',
              prop:'rssi'
            },{
              title:'GPS信号',
              prop:'satellites'
            }],
            tableTitle1:[{
              title:'报警时间',
              prop:'warningTimeStr'
            },{
              title:'报警类型',
              prop:'typeStr'
            }, {
              title:'通信信号',
              prop:'rssi'
            },{
            title:'GPS信号',
              prop:'satellites'
          }],
            tableTitle3:[{
              prop: "createTime",
              title: "变更日期",
              render: (h, param) => {
                if(param.row.createTime){
                  return moment(param.row.createTime).format("YYYY-MM-DD HH:mm:ss");
                }else {
                  return ''
                }
              }
            },{
              prop: "type",
              title: "变更类型",
              render: (h, param) => {
                if(param.row.type===0){
                  return '解绑';
                }else if(param.row.type===1){
                  return '绑定'
                }else {
                  return '换绑'
                }
              }
            },{
              title:'变更前',
              prop:'preTelephone'
            }, {
              title:'变更后',
              prop:'telephone'
            }]
          }
        },
      methods:{
        formatDate(row, column) {
          var date = row[column.property];
          if (date == undefined) {
            return "";
          }
          return moment(date).format("YYYY-MM-DD HH:mm:ss");
        },
        changePage(val){
          this.$emit('changeModalPage',{tabs:this.tabs,val:val})
        }
      }
    }
</script>

<style scoped>
  .ca-title{
    color:rgb(108, 167, 247);
    margin-bottom: 10px;

  }
  .devicedetails_list{
    margin-bottom: 20px;
  }
  .ca-box{
    line-height: 1.5;
  }
</style>
